@extends('layouts.layouts')
@section('title')
    <title>添加视频</title>
    <meta http-equiv="Access-Control-Allow-Origin" content="admin.saipujianshen.com">
    <style>
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }
        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }

    .btn{
        color: #fff;
        background-color: #337ab7;
        border-color: #2e6da4; 
        display: inline-block;
        padding: 6px 12px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        text-decoration: none;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 4px;
    }

    .progress{
        margin-top:2px;
        width: 200px;
        height: 14px;
        margin-bottom: 10px;
        overflow: hidden;
        background-color: #f5f5f5;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
        box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    }
    .progress-bar{ 
        background-color: rgb(92, 184, 92);
        background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.14902) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.14902) 50%, rgba(255, 255, 255, 0.14902) 75%, transparent 75%, transparent);
        background-size: 40px 40px;
        box-shadow: rgba(0, 0, 0, 0.14902) 0px -1px 0px 0px inset;
        box-sizing: border-box;
        color: rgb(255, 255, 255);
        display: block;
        float: left; 
        font-size: 12px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        transition-delay: 0s;
        transition-duration: 0.6s;
        transition-property: width;
        transition-timing-function: ease;
        width: 266.188px;
    }
    </style>
@endsection
@section('content')
    <link href="/lib/ueditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" charset="utf-8" src="/lib/ueditor/umeditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/lib/ueditor/umeditor.min.js"></script>
    <script type="text/javascript" src="/lib/ueditor/lang/zh-cn/zh-cn.js"></script>
    <script src="/js/upload.js" type="text/javascript"></script>
    <script src="/js/mobileBUGFix.mini.js" type="text/javascript"></script>
    <link href="/css/ueditor.css" type="text/css" rel="stylesheet">
    <div class="content">
        <div class="header">
            <ul class="breadcrumb">
                <li><a href="/video/index">视频列表</a> </li>
                <li class="active">添加视频</li>
            </ul>
        </div>
        <div class="main-content">
            <ul class="nav nav-tabs nav-tabs-course">
                <li role="presentation" class="course_add active"><a href="javascript:void(0);">视频添加</a></li>
                <!--<li role="presentation" class="course_hour_add"><a href="javascript:void(0);">课时添加</a></li>-->
            </ul>

 <form class="form-horizontal" id="courseFormInfo" name=theform action="/video/store" method="post">
                {{csrf_field()}}
            <div class="course_class row">
                    <div class="col-md-8">
                    </br>
                    <div class="form-group">
                                <label for="inputEmail3" class="col-sm-3 control-label">视频文件名字：</label>
                                <div class="col-sm-9">
                                    <input type="radio" name="myradio" value="local_name" checked=true/> 上传文件名字保持本地文件名字
                                    <input type="radio" name="myradio" value="random_name" /> 上传文件名字是随机文件名
                                </div>
                            </div>
                     <div class="form-group">
                                <label for="inputEmail3" class="col-sm-3 control-label">视频上传目录：</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control"  id='dirname' placeholder="如果不填，默认是上传到根目录" size=50>
                                </div>
                            </div>
                        <div class="tab-content">
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-3 control-label">视频地址</label>
                                <div class="col-sm-9">
                                    <h4>您所选择的文件列表：</h4>
                                     <div id="ossfile">你的浏览器不支持flash,Silverlight或者HTML5！</div>
                                    <div id="container">
                                        <a id="selectfiles" href="javascript:void(0);" class='btn'>选择文件</a>
                                        <a id="postfiles" href="javascript:void(0);" class='btn'>开始上传</a>
                                    </div>
                                    
                                    <input type="hidden" class="form-control" id="video_url" name="url" value="">
                                </div>
                            </div>
                        <br>
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-3 control-label">视频名称</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="inputEmail3" name="title" placeholder="视频名称">
                                </div>

                            </div>
                          
                            <div class="form-group">
                                <label for="inputPassword3" class="col-sm-3 control-label">状态栏</label>
								<div class="col-sm-5">
									<select name="state" id="DropDownTimezone" class="form-control">
											<option value="0">禁用</option>
											<option value="1" selected>显示</option>
									</select>
								</div>
                            </div>
              
                            
                           <!-- <div class="form-group">
                                <label for="inputPassword3" class="col-sm-3 control-label">问题指南</label>
                                <div class="col-sm-9">
                                    <textarea type="text/plain" name="content" id="myEditor" style="width:700px;height:240px;"></textarea>
                                </div>
                            </div>-->
                        </div>
                    </div>
                </div>
                   
                    <div class="row">
                        <p>
                            <button type="submit" class="btn btn-primary btn-lg col-md-offset-5" style="width:120px;background:#286090;color:#fff;">提交</button>
                        </p>
                    </div>

            </form>
        </div>
    </div>
    <script src="/js/ueditor.js"></script>
    <script src="/js/course.js"></script>
<script type="text/javascript" src="/osslib/crypto1/crypto/crypto.js"></script>
<script type="text/javascript" src="/osslib/crypto1/hmac/hmac.js"></script>
<script type="text/javascript" src="/osslib/crypto1/sha1/sha1.js"></script>
<script type="text/javascript" src="/osslib/base64.js"></script>
<script type="text/javascript" src="/osslib/plupload-2.1.2/js/plupload.full.min.js"></script>
<script type="text/javascript" src="/upload.js"></script>
    <script src="/lib/jquery.validate.js" type="text/javascript"></script>
    <script>
        var imgUrl = '{{env('IMG_URL')}}';
        $(".upload_img").UploadImg({
            url : '/course/fileUpload',
            // width : '320',
            //height : '200',
            quality : '0.8', //压缩率，默认值为0.8
            // 如果quality是1 宽和高都未设定 则上传原图
            mixsize : '10000000',
            //type : 'image/png,image/jpg,image/jpeg,image/pjpeg,image/gif,image/bmp,image/x-png',
            before : function(blob,className){
//                var className = '#'+className;
//                $(className).attr('src',blob);
            },
            error : function(res){
                $('#img').attr('src','');
                $('#error').html(res);
            },
            success : function(url,className){
                var idName = '#'+className;
                var className = '.'+className;
                $(idName).attr('src',imgUrl+url);
                $(className).val(url);
            }
        });
        $("#courseFormInfo").validate({
            onsubmit: true,// 是否在提交是验证
            submitHandler: function (form) {
                var name = $("input[name='name']").val();
				var status = $("input[name = 'status']").val();
				var content = $("input[name = 'content']").val();
                if(name == ''){
                    swal("问题名称未填!");
                    return false;
                }
				if(status == ""){
					swal("状态未选择！");
					return false;
				}
             if(content == "" ){
					swal("请填写内容！");
					return false;
			 }    
                form.submit();
            }
        });
    </script>
    <style type="text/css">
        .col-sm-2{
            width:60px;
        }
        .course_content{
            margin-right: -30px;
            margin-left: -30px;
            margin-top:5px;
        }
        .btn-success{
            background-image:none!important;
        }
    </style>
@endsection